<template>

	<view class="cont" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
		<view class="page-header">
			<view class="user-avatar" v-if="!userInfo.avatar">
				{{userInfo.userName.slice(0,1).toUpperCase()}}
			</view>
			<image :src="userInfo.avatar" class="user-avatar" v-else>


				<view class="userInfo">
					<view class="username">
						{{userInfo.userName}}
					</view>
					<view class="net-status">
						<view :class="{'statu-dot':true,'online':online}">
						</view>
						<text>{{online?'在线':'您已脱机'}}</text>
					</view>

				</view>

				<!-- <uni-icons fontFamily="iconfont" :size="20" color="#1f87ff">{{"\ue637"}}</uni-icons> -->

		</view>
		<view class="context-box">



			<view class="task-unchange-group">
				<view class="unchange-group-item" @click="()=>goListPage(group)" v-for="group in unchangeGrouups" :key="group.type">
					<uni-icons fontFamily="iconfont" :size="24" :color="group.color">{{group.unicode}}</uni-icons>
					<text class="group-name">{{group.label}}</text>
					<text class="task-number" v-if="taskgroups[group.type].length">{{taskgroups[group.type].length}}</text>
				</view>
			</view>
		</view>
		<qiunLoading :loadingType="4" v-if="loading" class="loading-task-list" />
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	import { mapActions, mapState, mapMutations } from 'vuex';
	import { getTaskGroup, alarmHandler } from '@/utils/taskList';
	import qiunLoading from '../../components/qiun-loading/qiun-loading.vue';
	import taskRefresh from '@/mixins/taskRefresh.js';
	export default {
		components: {
			qiunLoading
		},
		data() {
			return {

				taskgroups: {
					"myday": [],
					"assign": [],
					"tome": []
				},
			}
		},
		mixins: [taskRefresh],
		computed: {
			...mapState('taskStore', ['taskList', 'userInfo', 'online']),
			unchangeGrouups() {
				const secondList = this.userInfo.isAdmin ? {
					label: '已分配任务',
					type: 'assign',
					unicode: "\ue6b6",
					color: "#1f87ff"

				} : {
					label: '已分配给我',
					type: 'tome',
					unicode: "\ue661",
					color: "#c741c7"

				}
				return [{
						label: '我的一天',
						type: 'myday',
						unicode: "\ue731",
						color: '#5c70be'
					},
					secondList
				]
			}
		},
		methods: {
			...mapActions('taskStore', ['requestTasks', "addTask", 'updateTask']),
			...mapMutations('taskStore', ['setUserInfo', 'setOnline']),
			goListPage(group) {
				uni.navigateTo({
					url: `/pages/task-list/task-list?groupBy=${group.type}`
				});
			},
			watchNetStatus() {
				uni.getNetworkType({
					success: (res) => {
						const online = res.networkType !== 'none'
						this.setOnline(online)

					},
					fail: (err) => {
						console.error('获取网络类型失败：', err);
					}
				});
				// 监听网络状态变化
				uni.onNetworkStatusChange((res) => {
					this.setOnline(res.isConnected)
					console.log('网络类型变化:', res.networkType)

				});
			},
		},

		watch: {
			taskList: {
				handler(newV, oldV) {
					const { uniPlatform } = uni.getSystemInfoSync()
					if (uniPlatform === "app") {
						alarmHandler(newV, oldV)
					}
					this.taskgroups = {
						"myday": [],
						"assign": [],
						"tome": []
					}
					newV.filter(item => !item.deleted && !item.finishStatus).forEach(item => {
						const group = getTaskGroup(item)
						this.taskgroups[group].push(item)

					})
				},

				immediate: true,
				deep: true
			},
			online: {
				handler(newV) {
					console.log('==============')
					// 联网即请求任务列表
					newV && this.updateTask()
				},
				immediate: true
			}
		},
		created() {
			console.log("333333333333")
			this.watchNetStatus()
		},
		onUnload() {
			uni.offNetworkStatusChange(() => {});
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.cont {

		width: 100vw;
		height: 100vh;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		background-color: #eef4ff;
		display: flex;
		flex-direction: column;

		.page-header {
			width: 100%;
			padding: 8px 24upx 16px 12px;
			display: flex;
			align-items: center;
			box-sizing: border-box;

			.userInfo {
				margin-left: 24upx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-top: 12upx;

				.username {
					font-size: 32upx;
				}

				.net-status {
					display: flex;
					align-items: center;
					font-size: 24upx;
					padding: 12upx 0;

					.statu-dot {
						width: 24upx;
						height: 24upx;
						border-radius: 50%;
						background-color: #dcbf2d;
						margin-right: 12upx;

						&.online {
							background-color: #3bff00;
						}
					}

				}

			}

			.user-avatar {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				background-color: #5555ff;
				text-align: center;
				line-height: 100upx;
				color: #fff;
				font-size: 36upx;
			}
		}

		.context-box {
			width: 100%;
			flex: 1;
			background-color: #fff;
			border-radius: 24upx 24upx 0 0;
		}

		.task-unchange-group {
			width: 100%;

			padding: 12px 8px 8px 16px;
			box-sizing: border-box;


			.unchange-group-item {
				padding: 16px 0px;
				display: flex;
				align-items: center;
				font-size: 28upx;

				// &:last-child {
				border-bottom: 1upx solid #f3f3f3;
				// }

				.group-name {
					margin-left: 24upx;
					flex: 1;

				}

				.task-number {
					padding: 0 11upx;
					width: max-content;
					height: 36upx;
					border-radius: 18upx;
					background-color: red;
					margin-right: 8px;
					color: #fff;
					text-align: center;
					line-height: 36upx;
				}

			}

		}
	}
</style>